// custom-tab-bar/index.js
// 引入store及操作store的库
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../store/store"

Component({
  // 挂载behaviors
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    // 映射仓库中的数据
    fields:{
      sum:'sum',
      active:'activeTabBarIndex'
    },
    actions:{
      updateActiveTabBarIndex:'updateActiveTabBarIndex'
    }
  },
  // 监听器--监听数据的变化
  observers:{
    'sum':function(val){
      this.setData({
        'list[2].info':val
      })
    }
  },
  options:{
    // 开启覆盖样式
    styleIsolation:"shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    list: [
      {
        pagePath: "/pages/home/index",
        text: "首页",
        iconPath: "/images/home.png",
        selectedIconPath: "/images/home.png"
      },
      {
        pagePath: "/pages/about/index",
        text: "关于",
        iconPath: "/images/contact.png",
        selectedIconPath: "/images/contact.png"
      },
      {
        pagePath: "/pages/message/index",
        text: "消息",
        iconPath: "/images/message.png",
        selectedIconPath: "/images/message.png",
        info:"1"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // 更新store里的值
      this.updateActiveTabBarIndex(event.detail)
      // 跳转路径
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})